﻿@model IEnumerable<RenWuZhi.Models.rwz_PeopleContent>
@{
    ViewBag.Title = "主页";
}
@section    Head{
    <style type="text/css">
        body, div, p
        {
            margin: 0;
            padding: 0;
        }
        body
        {
            font-size: 12px;
            font-family: "宋体" , "Arial";
        }
        .search
        {
            width: 900px;
            height: 600px;
            margin: 1px auto;
            position: relative;
            background: #dfdfdf;
            border: 1px #fff solid;
            background: no-repeat;
        }
        .spbox
        {
            position: absolute;
            width: 38px;
            height: 38px;
            border: 1px #000 solid;
            -moz-opacity: 0.6;
            opacity: 0.6;
            filter: alpha(opacity=60);
        }
        .spbox span
        {
            display: block;
            width: 36px;
            height: 36px;
            margin: 1px;
            background: #000;
        }
        #spbox1
        {
            left: 130px;
            top: 380px;
        }
        #spbox2
        {
            left: 185px;
            top: 220px;
        }
        #spbox3
        {
            left: 750px;
            top: 200px;
        }
        #spbox4
        {
            left: 430px;
            top: 450px;
        }
        
        .ctbox
        {
            position: absolute;
            padding: 1px;
            width: 196px;
            height: 76px;
            border: 1px #000 solid;
            -moz-opacity: 0.6;
            opacity: 0.6;
            filter: alpha(opacity=60);
            display: none;
        }
        .ctbox div
        {
            width: 196px;
            height: 76px;
            background: #000;
        }
        #ctbox1, #a_ct1
        {
            left: 170px;
            top: 380px;
        }
        #ctbox2, #a_ct2
        {
            left: 225px;
            top: 220px;
        }
        #ctbox3, #a_ct3
        {
            left: 550px;
            top: 200px;
        }
        #ctbox4, #a_ct4
        {
            left: 470px;
            top: 450px;
        }
        
        .a_ct
        {
            position: absolute;
            width: 180px;
            height: 70px;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            padding: 5px 10px;
            z-index: 10;
            line-height: 18px;
            display: none;
        }
        a.a_ct:hover p
        {
            text-decoration: underline;
        }
        .sp_ask
        {
            display: inline-block;
            width: 100px;
            text-decoration: underline;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .sp_go
        {
            color: #FFA500;
            font-size: medium;
        }
    </style>
}
<div id="box" class="search" style="background-image: url(../../Content/themes/base/images/Langisjor_ZH-CN1466259422.jpg);">
    <h2 style="color: White;">@ViewBag.Message</h2>
    <p style="margin: 5px;">
        @using (Html.BeginForm())
        {
            @Html.TextBox("text1")
            <input type="submit" value="搜索" name="action" />
        }
    </p>
    @{
        int temp = 0;
    }
    @foreach (var item in Model)
    {

        temp++;
        var spbox = "spbox" + temp.ToString();
        var a_ct = "a_ct" + temp.ToString();
        var ctbox = "ctbox" + temp.ToString();
        
        <span id="@spbox" class="spbox"><span></span></span><a id="@a_ct" class="a_ct" href="/PeopleContent/Details/@item.PC_ID" title="#">
            <p>@item.PC_Title
            </p>
            <span class="sp_ask">@item.PC_Content</span> <span class="sp_go">»</span> </a>
        <div id="@ctbox" class="ctbox">
            <div>
            </div>
        </div>
    }
</div>
<script language="javascript" type="text/javascript">
    var _isie = !!document.all;
    var _d = document;
    var _$ = function (eleid) {
        return (typeof eleid == 'object') ? eleid : (_d.getElementById(eleid) ? _d.getElementById(eleid) : null);
    }
    var _box = _$("box"), _btn = _$("btn");

    var _r = 100; //范围半径
    var _minr = 20; //小矩形半径
    var _spboxs = []; //保存活动点信息
    var _flag = false; //标志是否执行#box的mousemove绑定函数

    var bindHoverBox = function () {
        $("#box").bind("mousemove", function (event) {
            event = !_isie ? event : (window.event ? window.event : null);
            var x, y;
            var sleft, stop;

            //兼容ie,chrome;opera safari moz
            sleft = (_isie || /chrome/.test(window.navigator.userAgent.toLowerCase())) ? document.body.scrollLeft : document.documentElement.scrollLeft;
            stop = (_isie || /chrome/.test(window.navigator.userAgent.toLowerCase())) ? document.body.scrollTop : document.documentElement.scrollTop;

            x = _isie ? event.x : (event.clientX + sleft - _box.offsetLeft);
            y = _isie ? event.y : (event.clientY + stop - _box.offsetTop);

            x = (isNaN(x)) ? 0 : x;
            y = (isNaN(y)) ? 0 : y;
            if (!_flag) {
                for (var i = 0; i < _spboxs.length; i++) {
                    if (ifShow(x, y, _spboxs[i])) {
                        _spboxs[i].qel.stop().fadeTo(30, 0.6);
                        //bindHover(_spboxs[i].qel);
                    } else {
                        _spboxs[i].qel.stop().fadeOut(50);
                    }
                }
            }
        });
    };
    //初始化中心点位置
    var initCenter = function () {
        var obj;
        $(".spbox").each(function () {
            obj = new Object();
            obj.qel = $(this);
            // obj.nel=$(this).next(".a_ct");
            obj.p = $(this).position();
            obj.x = $(this).position().left + _minr;
            obj.y = $(this).position().top + _minr;
            _spboxs.push(obj);

            //绑定
            bindHover(obj.qel);
            bindCtHover(obj.qel);

            $(this).fadeOut();
        });
    };
    //判断是否在触发范围内
    var ifShow = function (x, y, box) {
        var r1 = Math.abs(x - box.x);
        var r2 = Math.abs(y - box.y);

        // _btn.value=r1+"#|"+r2;//debugline

        if (r1 < _r && r2 < _r) {
            return true;
        } else {
            return false;
        }
    };
    //绑定小box
    function bindHover(obj) {
        obj.hover(function () {
            $(this).next().next().stop().fadeTo(100, 0.6, function () {
                $(this).prev().stop().fadeTo(150, 1);
            });
        },
         function () {
             $(this).next().stop().fadeOut(150);
             $(this).next().next().stop().fadeOut(150);
         });
    }
    //绑定内容背景
    function bindCtHover(obj) {
        obj.next().bind("mousemove", function () {
            $(this).stop().fadeTo(10, 1);
            $(this).next().stop().fadeTo(10, 0.6);
            $(this).prev().stop().fadeTo(10, 0.6);
            _flag = true;
        });
        obj.next().bind("mouseout", function () {
            _flag = false;
            $(this).stop().fadeOut(150);
            $(this).next().stop().fadeOut(150);
            // $(this).prev().stop().fadeOut(150);
        });
    }
    initCenter();
    bindHoverBox();
</script>
